import React from 'react'
import { Modal, Space, Button } from 'antd'
import TheImage from '@/components/TheImage'
import VideoPlayer from "@/components/VideoPlayer"

export default class ServeInfoModal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalOpen: props.isModalOpen ?? false, //弹窗显示隐藏
      info: props.detailsData ?? null //服务详情信息
    }
  }
  //播放视频
  videoDialog = (URL) => {
    Modal.confirm({
      title: '视频预览',
      icon: "",
      content: <VideoPlayer src={URL} />,
      cancelText: '关闭',
      width: "535px",
      maskClosable: true,
      closable: true,
      okButtonProps: { style: { display: "none" } },
      cancelButtonProps: { style: { display: "none" } },
    })
  }
  render() {
    const { isModalOpen, info } = this.state
    return (
      <div>
        <Modal title="查看" open={isModalOpen} footer={<Button onClick={() => { this.props.getModalOpen(false) }}>我知道了</Button>} onCancel={() => { this.props.getModalOpen(false) }}>
          <Space size={10} style={{ display: 'flex', flexWrap: 'wrap' }}>
            {info && info.fileList.map(item => {
              console.log(item,'ssssss');
              return (
                <div>
                  {item.fileType === 'img' && <TheImage src={item.fileUrl} width={80} height={80}></TheImage>}
                  {item.fileType === 'video' && <TheImage
                    preview={{ visible: false }}
                    src={item.fileUrl + "?x-oss-process=video/snapshot,t_1000,m_fast"}
                    width={80} height={80}
                    onClick={() => {
                      this.videoDialog(item.fileUrl)
                    }} />}
                </div>
              )
            })}

          </Space>
        </Modal>
      </div>
    )
  }
}